export default {
  created() {
    this.getData();
  },
  data() {
    return {
      rolesList: [],
      //添加角色相关数据
      addDialogFormVisible: false,
      addForm: {
        roleName: "",
        roleDesc: ""
      },
      rules: {
        roleName: [
          { required: true, message: "角色名称必须填写", trigger: "blur" }
        ],
        roleDesc: [
          { required: true, message: "角色描述必须填写", trigger: "blur" }
        ]
      },
      //编辑角色相关数据
      editDialogFormVisible: false,
      editForm: {
        roleName: "",
        roleDesc: ""
      }
    };
  },
  methods: {
    //编辑角色
    //点击编辑按钮 获取相关行的属性 对原有角色进行编辑
    openEditDialog(row) {
      this.editDialogFormVisible = true;
      this.$nextTick(() => {
        //重置表单（数据 样式）
        this.$refs.editForm.resetFields();
        // 填充数据 依赖行数据(row)
        // 将来提交请求需要ID 所以也需要获取数据
        this.editForm.id = row.id;
        this.editForm.roleName = row.roleName;
        this.editForm.roleDesc = row.roleDesc;
      });
    },
    //点击编辑角色对话框中的按钮 向后台发请求 成功或者失败
    editRole() {
      this.$refs.editForm.validate(async (valid) => {
        if (valid) {
          const {
            data: { meta }
          } = await this.$http.put(`./roles/${this.editForm.id}`, {
            roleName: this.editForm.roleName,
            roleDesc: this.editForm.roleDesc
          });
          if (meta.status !== 200) return this.$message.error("编辑角色失败");
          //向后台传输数据 成功
          this.editDialogFormVisible = false;
          this.getData();
        }
      });
    },
    //删除角色
    //删除角色（整行删除）
    delRole(roleId) {
      this.$confirm("亲，是否删除该角色?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const {
            data: { meta }
          } = await this.$http.delete(`roles/${roleId}`);
          if (meta.status !== 200) return this.$message.error("删除角色失败");
          this.getData();
        })
        .catch(() => null);
    },
    //添加角色
    //点击确定按钮 打开添加角色对话框
    openAddDialog() {
      this.addDialogFormVisible = true;
      //再次打开添加角色列表 清空上一次输入的表单内容
      this.$nextTick(() => {
        this.$refs.addForm.resetFields();
      });
    },
    //将角色列表中新添加的数据发送给后台
    addRole() {
      //1.在表单提交数据之前 要先对整个表单进行数据校正
      this.$refs.addForm.validate(async valid => {
        if (valid) {
          // 2. 知道提交的数据有哪些？roleName roleDesc ---> addForm
          const {
            data: { meta }
          } = await this.$http.post("./roles", this.addForm);
          if (meta.status !== 201) return this.$message.error("添加角色失败");
          //3.如果提交角色列表成功
          this.getData();
          this.addDialogFormVisible = false;
        }
      });
    },

    //获取角色列表数据
    async getData() {
      const {
        data: { data, meta }
      } = await this.$http.get(`roles`);
      if (meta.status !== 200) return this.$message.error("获取角色据失败");
      //   this.getData();
      this.rolesList = data;
    }
  }
};
